<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
    />
    <title>wowjs的使用</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <!-- 1 引入资源css js -->
    <link rel="stylesheet" href="./css/animate.css" />
    <script src="./js/wow.min.js"></script>
  </head>
  <body>
    <div class="box">
      <!-- 2 声明元素，添加class样式和属性data-wow-delay -->
      <ul style="width: 300px; margin: 0 auto">
        <li class="wow slideInLeft" data-wow-delays="0s">
          <img src="./img/1.png" alt="" width="200" />
        </li>
        <li class="wow bounceInDown" data-wow-delays="0.2s">
          <img src="./img/2.png" alt="" width="200" />
        </li>
        <li class="wow slideInLeft" data-wow-delays="0.4s">
          <img src="./img/3.png" alt="" width="200" />
        </li>
        <li class="wow slideInRight" data-wow-delays="0.6s">
          <img src="./img/4.png" alt="" width="200" />
        </li>
        <li class="wow slideInLeft" data-wow-delays="0.8s">
          <img src="./img/5.png" alt="" width="200" />
        </li>
        <li class="wow slideInRight" data-wow-delays="1s">
          <img src="./img/6.png" alt="" width="200" />
        </li>
        <li class="wow slideInLeft" data-wow-delays="1.2s">
          <img src="./img/1.png" alt="" width="200" />
        </li>
        <li class="wow slideInRight" data-wow-delays="1.4s">
          <img src="./img/2.png" alt="" width="200" />
        </li>
        <li class="wow slideInLeft" data-wow-delays="1.6s">
          <img src="./img/3.png" alt="" width="200" />
        </li>
        <li class="wow slideInRight" data-wow-delays="1.8s">
          <img src="./img/4.png" alt="" width="200" />
        </li>
        <li class="wow slideInLeft" data-wow-delays="2.0s">
          <img src="./img/5.png" alt="" width="200" />
        </li>
        <li class="wow slideInRight" data-wow-delays="2.2s">
          <img src="./img/6.png" alt="" width="200" />
        </li>
      </ul>
    </div>
    <script>
      // 3 创建对象
      let wow = new WOW({
        boxClass: 'wow', //WOW.js需要执行动画的元素的class
        animateClass: 'animated', //animation.css 动画的 class
        offset: 0, //距离可视区域多少开始执行动画
        mobile: true, //是否在移动设备上执行动画
        live: true, //异步加载的内容是否有效
      })
      // 4 启动监听
      wow.init()
    </script>
  </body>
</html>
